<template>
	
	<view>
		<!-- 步骤进度条 -->
		<view class="progress-wrapper">
			<view class="line"></view>
			<view class="progress-step" v-for="(step, index) in steps" :key="index">
				<view class="step-circle" :class="{ 'completed': index < currentStep }">
					<text v-if="index < currentStep" class="step-num">{{ index + 1 }}</text>
					<text v-else class="step-num">{{ index + 1 }}</text>
				</view>
				<view class="step-line">{{step}}</view>
			</view>
		</view>
		<!-- <template v-if="reviewType">
			<div class="review_tip color-base-text">
				{{
          reviewType == 1
            ? "待平台审核"
            : reviewType == 2
            ? "待与平台签约"
            : reviewType == 3
            ? "待第三方平台审核"
            : reviewType == 4 
			?'待支付公司签约'
			:reviewType == -1
			?'平台审核失败'
			:'第三方平台审核失败'
        }}
			</div>
			<div class="sign_a_contract color-base-bg" v-if="reviewType == 2" @click="goSign">
				立即与平台签约
			</div>
			<template v-else-if="reviewType < -1">
				<div class="review_tip color-base-text" style="font-size: 32rpx;">拒绝理由: {{ formData.settled_message }}
				</div>
				<div class="sign_a_contract color-base-bg" @click="resultAddInfo">
					重新填写资料
				</div>
			</template>
		</template> -->

		<!-- <template v-else-if="reviewType == 99 || !reviewType"> -->
			<!-- <template> -->
			<view class="fastinfo">
				<view class="item-wrap">
					<view class="label">
						<text class="required color-base-text">*</text>
						<text>店铺名称</text>
					</view>
					<input type="text" class="uni-input" placeholder="请输入自定义名称" v-model="formData.shop_name"
						@blur="blurShopName" />
				</view>
				<view class="item-wrap">
					<view class="label">
						<text class="required color-base-text">*</text>
						<text>联系人电话</text>
					</view>
					<input class="uni-input" placeholder="请输入联系人电话" type="number" v-model="formData.telephone"
						maxlength="11" />
				</view>
				<view class="item-wrap more-wrap">
					<view class="label">
						<text class="required color-base-text">*</text>
						<text>主营行业</text>
					</view>
					<picker class="selected" :value="industryV" :range="industryList" @change="industryChange"
						range-key="category_name">
						<view class="uni-input" :class="{ 'color-tip': !formData.category_name }">
							{{
              formData.category_name ? formData.category_name : "请选择主营行业"
            }}
						</view>
					</picker>
					<text class="iconfont iconright"></text>
				</view>
				<view class="item-wrap more-wrap">
					<view class="label">
						<text class="required color-base-text">*</text>
						<text>店铺让利</text>
					</view>
					<picker class="selected" :value="rateV" :range="rateList" range-key="shop_rate"
						@change="rateChange">
						<view class="uni-input" :class="{ 'color-tip': !formData.rate_name }">
							{{
              formData.rate_name ? formData.rate_name + "%" : "请选择店铺让利"
            }}
						</view>
					</picker>
					<text class="iconfont iconright"></text>
				</view>
				<view class="item-wrap goods-img">
					<view class="label">
						<text class="required color-base-text">*</text>
						<text>店面正门面</text>
					</view>
					<view class="img-list">
						<view class="tips">建议尺寸：4：3</view>
						<view class="add logo" @click="uplodImg('shop_facade')">
							<text class="iconfont iconadd1" v-if="!formData.shop_facade"></text>
							<image v-else :src="$util.img(formData.shop_facade)" mode="aspectFit"
								@error="imgError('shop_facade')" @click.stop="previewMedia('shop_facade')"></image>
							<view class="del-wrap iconfont iconclose" @click.stop="delImg('shop_facade')"
								v-if="formData.shop_facade"></view>
						</view>
					</view>
				</view>
				<view class="item-wrap goods-img">
					<view class="label">
						<text class="required color-base-text">*</text>
						<text>店内场景照片</text>
					</view>
					<view class="img-list">
						<view class="tips">建议尺寸：9：16</view>
						<view class="add banner" @click="uplodImg('scene_diagram')">
							<text class="iconfont iconadd1" v-if="!formData.scene_diagram"></text>
							<image v-else :src="$util.img(formData.scene_diagram)" mode="aspectFit"
								@error="imgError('scene_diagram')" @click.stop="previewMedia('scene_diagram')"></image>
							<view class="del-wrap iconfont iconclose" @click.stop="delImg('scene_diagram')"
								v-if="formData.scene_diagram">
							</view>
						</view>
					</view>
				</view>
				<view class="item-wrap goods-img">
					<view class="label">
						<text class="required color-base-text">*</text>
						<text>微信名片或店名照片</text>
					</view>
					<view class="img-list">
						<view class="tips">建议尺寸：4：3</view>
						<view class="add avatar" @click="uplodImg('wx_card')">
							<text class="iconfont iconadd1" v-if="!formData.wx_card"></text>
							<image v-else :src="$util.img(formData.wx_card)" mode="aspectFit"
								@error="imgError('wx_card')" @click.stop="previewMedia('wx_card')"></image>
							<view class="del-wrap iconfont iconclose" @click.stop="delImg('wx_card')"
								v-if="formData.wx_card">
							</view>
						</view>
					</view>
				</view>
				<view class="item-wrap more-wrap">
					<view class="label">
						<text class="required color-base-text">*</text>
						<text>店铺简介</text>
					</view>
					<textarea class="uni-input font-size-base" placeholder="请输入店铺简介" v-model="formData.seo_description"
						maxlength="300" auto-height="true"></textarea>
				</view>
				<view class="item-wrap">
					<view class="label">
						<text class="required color-base-text">*</text>
						<text>联系地址</text>
					</view>
					<input class="uni-input" placeholder="请选择省市区" v-model="formData.address" maxlength="100" readonly
						@click="selectAddress" />
				</view>
				<view class="item-wrap more-wrap">
					<view class="label">
						<text class="required color-base-text">*</text>
						<text>详细地址</text>
					</view>
					<textarea class="uni-input font-size-base" placeholder="请输入详细地址" v-model="formData.full_address"
						maxlength="100" auto-height="true"></textarea>
				</view>

			</view>
			
			<view class="apply_button">
				<view class="tips color-base-text" v-if="is_city == 1">注意：注册后店铺名称、城市分站不可修改。</view>
				<view class="tips color-base-text" v-else>注意：注册后店铺名称不可修改。</view>
				<button type="primary" @click="toIn()">下一步</button>		
				<button type="primary" @click="toStep()">步骤页</button>		
				<button type="primary" @click="clearStor()">删除缓存</button>
			</view>
			<!-- </template> -->
	</view>
</template>

<script>
	import validate from "@/common/js/validate.js";
	export default {
		data() {
			return {
				steps: ['基本信息', '商户资料', '银行账户', '线上店铺'],
				currentStep: 1,
				reviewType: null,
				formData: {
					shop_name: "", //店铺名称
					telephone: "", //联系电话
					category_id: "", //主营行业ID
					category_name: "", //主营行业名称
					rate_id: "", //让利比例id
					rate_name: "", //让利比例名称
					shop_facade: "", //店铺正门面
					scene_diagram: "", //店铺场景图
					wx_card: "", //微信名片或点名照片
					seo_description: "", //店铺简介
					address: "", //详细地址
					full_address: "", //完整地址
					longitude: "", //经度
					latitude: "", //纬度
				},
				industryList: [], //主营行业数组
				industryNumList: [], //主营行业ID数组
				is_city: 0,
				cityList: [], //城市分站数组
				cityNumList: [], //城市分站ID数组
				rateList: [],
				isShop: false, // 自定义名称是否存在
				rateV: 0,
				industryV: 0,
				isloading: false,
			};
		},
		async created() {
			console.log('进入页面就执行函数')
			if (!uni.getStorageSync("shop_token")) {
				this.$util.redirectTo("/pages/login/login", {}, "redirectTo");
				return false;
			}
			await this.initData();
			await this.getRateList();
			await this.getApplication();
			uni.hideLoading();
			setTimeout(() => {
				this.isloading = true;
			}, 500);
		},

		methods: {
			resultAddInfo() {
				this.reviewType = null
			},
			/*
			 * author：Gengbaodada
			 * create by date：2025/08/30
			 * content：去签约
			 */
			goSign() {
				uni.navigateTo({
					url: "/pages/apply/sign_web_view",
				});
			},
			// 获取是否进件是否审核通过
			async getApplication() {
				uni.showLoading({
					title: "加载中",
				});
				return new Promise((resolve, reject) => {
					this.$api.sendRequest({
						url: "/shopapi/apply/getShopApplyStatus",
						data: {
							member_id: uni.getStorageSync("member_id"),
						},
						success: (res) => {
							if (res.data) {
								this.reviewType = res.data.apply_state;
								if (res.data.apply_state != 3) {
									this.rateV = this.rateList.findIndex(
										(e) => e.rate_id == res.data.rate_id
									);
									this.industryV = this.industryList.findIndex(
										(e) => e.category_id == res.data.category_id
									);
									this.formData = {
										shop_name: res.data.shop_name, //店铺名称
										telephone: res.data.telephone, //联系电话
										category_id: res.data.category_id, //主营行业ID
										category_name: this.industryList[this.industryV]
											.category_name, //主营行业名称
										rate_id: res.data.rate_id, //让利比例id
										rate_name: this.rateList[this.rateV]
											.shop_rate, //让利比例名称
										shop_facade: res.data.shop_facade, //店铺正门面
										scene_diagram: res.data.scene_diagram, //店铺场景图
										wx_card: res.data.wx_card, //微信名片或点名照片
										seo_description: res.data.seo_description, //店铺简介
										address: res.data.address, //详细地址
										full_address: res.data.full_address, //完整地址
										longitude: res.data.longitude, //经度
										latitude: res.data.latitude, //纬度
										settled_message: res.data.settled_message,
										settled_id: res.data.settled_id
									};
								}
							} else {
								this.reviewType = null;
							}
						},
					});
					resolve();
				});
			},
			uplodImg(type) {
				this.$util.upload({
						number: 1,
						path: "image",
					},
					(res) => {
						if (res) {
							this.$util.showToast({
								title: "上传成功",
							});
							console.log("上传图片", res);
							if (type == "shop_facade") this.formData.shop_facade = res[0];
							else if (type == "scene_diagram")
								this.formData.scene_diagram = res[0];
							else if (type == "wx_card") this.formData.wx_card = res[0];
						}
					}
				);
			},
			delImg(type) {
				if (type == "shop_facade") this.formData.shop_facade = "";
				else if (type == "scene_diagram") this.formData.scene_diagram = "";
				else if (type == "wx_card") this.formData.wx_card = "";
			},
			previewMedia(type) {
				var paths = [this.$util.img(this.formData[type])];
				uni.previewImage({
					current: 0,
					urls: paths,
				});
			},
			imgError(type) {
				this.formData[type] = this.$util.img(
					this.$util.getDefaultImage().default_headimg
				);
				this.$forceUpdate();
			},
			//获取详细地址
			getAddress(value, addressName) {
				this.$api.sendRequest({
					url: "/api/memberaddress/tranAddressInfo",
					data: {
						latlng: value,
					},
					success: (res) => {
						if (res.code == 0) {
							this.formData.address = "";
							this.formData.address +=
								res.data.province != undefined ? res.data.province : "";
							this.formData.address +=
								res.data.city != undefined ? "-" + res.data.city : "";
							this.formData.address +=
								res.data.district != undefined ? "-" + res.data.district : "";
							this.formData.address +=
								addressName != undefined ? "-" + addressName : "";
						} else {
							this.$util.showToast({
								title: "选择地址数据有误，请重新选择",
							});
						}
					},
				});
			},
			selectAddress() {
				var urlencode = this.shopInfo;
				uni.setStorageSync("addressInfo", JSON.stringify(urlencode));
				uni.chooseLocation({
					success: (res) => {
						this.formData.latitude = res.latitude;
						this.formData.longitude = res.longitude;
						this.formData.full_address = res.address;
						var latng = res.latitude + "," + res.longitude;
						this.getAddress(latng, res.name);
					},
					fail(res) {
						console.log(res);
					},
				});
			},
			async initData() {
				return new Promise((resolve, reject) => {
					this.$api.sendRequest({
						url: "/shopapi/apply/index",
						success: (res) => {
							var data = res.data;
							if (res.code == 0) {
								if (data.shop_apply_info) {}
								this.is_city = data.is_city;
								if (this.is_city == 1) {
									//城市分站
									for (var key in data.web_city) {
										this.cityList.push(data.web_city[key].site_area_name);
										this.cityNumList.push(data.web_city[key].site_id);
									}
								}
								this.industryList = data.shop_category;
								console.log("=======", this.industryList);
								//所属行业
								//   for (var key in data.shop_category) {
								//     // 行业名称列表
								//     push(data.shop_category[key].category_name);
								//     // 行业id列表
								//     this.industryNumList.push(data.shop_category[key].category_id);
								//   }
							} else {
								this.$util.showToast({
									title: res.message,
								});
							}
							resolve();
						},
					});
				});
			},
			//店铺名称失去焦点
			blurShopName(e) {
				this.$api.sendRequest({
					url: "/shopapi/apply/shopNameExist",
					data: {
						shop_name: e.detail.value,
					},
					success: (res) => {
						if (res.code !== 0) {
							this.$util.showToast({
								title: res.message,
							});
							this.isShop = !this.isShop;
						}
					},
				});
			},
			cityChange(e) {
				if (this.cityList.length == 0) return;
				this.formData.cityName = this.cityList[e.detail.value];
				this.formData.cityNum = this.cityNumList[e.detail.value];
			},
			industryChange(e) {
				if (this.industryList.length == 0) return;
				this.formData.category_id = this.industryList[e.detail.value].category_id;
				this.formData.category_name =
					this.industryList[e.detail.value].category_name;
			},
			rateChange(e) {
				if (this.rateList.length == 0) return;
				this.formData.rate_name = this.rateList[e.detail.value].shop_rate;
				this.formData.rate_id = this.rateList[e.detail.value].rate_id;
			},
			getRateList() {
				return new Promise((resolve, reject) => {
					this.$api.sendRequest({
						url: "/shopapi/apply/getRateList",
						data: {},
						success: (res) => {
							this.rateList = res.data;
							resolve();
						},
					});
				});
			},
			vertify() {
				let rule = [{
						name: "shop_name",
						checkType: "required",
						errorMsg: "请输入自定义名称",
					},
					{
						name: "telephone",
						checkType: "required",
						errorMsg: "请输入联系电话",
					},
					{
						name: "category_id",
						checkType: "required",
						errorMsg: "请选择主营行业",
					},
					{
						name: "rate_id",
						checkType: "required",
						errorMsg: "请选择店铺让利比",
					},
					{
						name: "shop_facade",
						checkType: "required",
						errorMsg: "请上传店面正门面",
					},
					{
						name: "scene_diagram",
						checkType: "required",
						errorMsg: "请上传店铺环境照片",
					},
					{
						name: "wx_card",
						checkType: "required",
						errorMsg: "请上传微信名片或门头照片",
					},
					{
						name: "address",
						checkType: "required",
						errorMsg: "请选择联系地址",
					},
					{
						name: "full_address",
						checkType: "required",
						errorMsg: "请选择联系地址",
					},
					{
						name: "seo_description",
						checkType: "required",
						errorMsg: "请输入店铺简介",
					},
				];
				if (this.isShop != false) {
					this.$util.showToast({
						title: "店铺已存在",
					});
					return false;
				}

				let checkRes = validate.check(this.formData, rule);
				if (checkRes) {
					return true;
				} else {
					this.$util.showToast({
						title: validate.error,
					});
					return false;
				}
			},
			toIn() {
				// if (this.vertify()) {
				// 	uni.setStorageSync("application_shopInfo", this.formData);
				// 	let subObj = {
				// 		...this.formData,
				// 		member_id: uni.getStorageSync("member_id"),
				// 	};
				// 	this.$api.sendRequest({
				// 		url: "/shopapi/apply/applyShopSettled",
				// 		data: subObj,
				// 		success: (res) => {
				// 			if (res.code == 0) {
				// 				this.$util.showToast({
				// 					title: "申请成功，下一步!",
				// 				});
				// 				setTimeout(() => {
				// 					uni.navigateTo({
				// 						url: "/pages/apply/openinfo",
				// 					});
				// 				}, 1000);
				// 			}
				// 		},
				// 	});
					
				// }
				
				
				
				// uni.navigateTo({
				// 	url: "/pages/apply/openinfo",
				// });
				// return
				
				if (this.vertify()) {
					uni.setStorageSync("application_shopInfo", this.formData);
					uni.navigateTo({
						url: "/pages/apply/openinfo",
					});
				}
				return;
			},
			toStep(){
				uni.navigateTo({
					url:'/pages/apply/apply_step'
				})
			},
			clearStor(){
				uni.clearStorage()
				this.$util.showToast({
					title: "删除缓存成功",
				});

			}
		},
	};
</script>

<style lang="scss">
	.fastinfo {
		overflow: hidden;
		height: 100%;
		margin: 40rpx;
		background-color: #fff;
		border-radius: 20rpx;
		

		.sign_a_contract {
			width: calc(100vw - 240rpx);
			margin: 40rpx 120rpx;
			border-radius: 18rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border: 1px solid #eee;
			color: #fff;
		}

		.review_tip {
			width: 100vw;
			text-align: center;
			line-height: 120rpx;
			line-height: 120rpx;
			font-size: 40rpx;
		}

		.item-wrap {
			min-height: 100rpx;
			border-bottom: 2rpx solid #F1F1F1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx 0;

			&:first-child {
				margin-top: 20rpx;
			}

			&:last-child {
				border: none;
			}

			.uni-input {
				text-align: right;
				width: 400rpx;
			}

			&.more-wrap {
				.selected {
					vertical-align: middle;
					display: inline-block;
					flex: 1;
					text-align: right;
					color: $color-tip;
					overflow: hidden;
					white-space: pre;
					text-overflow: ellipsis;

					&.have {
						color: $color-title;
					}
				}

				.iconfont {
					color: $color-tip;
					margin-left: 20rpx;
				}
			}

			&.goods-img {
				display: flex;
				white-space: nowrap;

				.label {
					align-self: flex-start;
					margin-top: 20rpx;
					width: 160rpx;
				}

				.img-list {
					padding-top: 4rpx;
					padding-bottom: 40rpx;

					.add {
						margin-top: 20rpx;
						position: relative;
						text-align: center;
						border: 1px dashed #cccccc;
						font-weight: bold;
						color: $color-tip;

						.iconfont {
							font-size: 40rpx;
						}

						&.logo {
							height: 140rpx;
							line-height: 140rpx;
						}

						&.avatar {
							height: 140rpx;
							line-height: 140rpx;
						}

						&.banner {
							height: 120rpx;
							line-height: 120rpx;
						}

						image {
							width: 100%;
							height: 100%;
						}

						.del-wrap {
							position: absolute;
							top: -16rpx;
							right: -16rpx;
							line-height: 1;
							width: 16px;
							height: 16px;
							background-color: rgba(0, 0, 0, 0.5);
							border-radius: 50%;
							display: -webkit-box;
							display: -webkit-flex;
							display: flex;
							-webkit-box-pack: center;
							-webkit-justify-content: center;
							justify-content: center;
							-webkit-box-align: center;
							-webkit-align-items: center;
							align-items: center;
							font-size: 12px;
							color: #fff;
							font-weight: bold;
						}
					}
				}

				.tips {
					color: $color-tip;
					font-size: $font-size-activity-tag;
					margin-top: 20rpx;
					word-wrap: break-word;
					word-break: break-all;
				}
			}
		}
		.required {
			margin-right: 6rpx;
		}
	}
	.progress-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 66rpx 0;
		background-color: #fff;
		.line {
			height: 14rpx;
			width: 80%;
			background-color: #f9f9f9;
			border-radius: 20rpx;
			display: block;
			position: absolute;
			top: 90rpx;
			left: 10%;
		}
		
		.progress-step {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			width: 25%;
		}
		
		.step-circle {
		  width: 52rpx;
		  height: 52rpx;
		  border-radius: 50%;
		  background-color: #f6f6f6;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  position: relative;
		  box-shadow: 0 0 0px 14rpx #f6f6f6;
		  color: #999;
		  font-weight: bold;
		}
		
		.completed {
		  background-color: #ff6a00;
		  box-shadow: 0 0 0px 14rpx #ff00002e;
		  color: #FFF;
		}
		
		.step-line {
			margin-top: 50rpx;
		}
	}
	
	.apply_button {
		margin: 60rpx 20%;
		padding-bottom: 80rpx;
		text-align: center;
		.tips {
			margin: 20rpx 0;
			font-size: $font-size-tag;
		}

		button {
			margin-top: 40rpx;
		}
	}
</style>